<template>
    <div>
        <a-radio-group v-model="lanMode" button-style="solid">
            <a-radio-button value="single"> 单LAN口 </a-radio-button>
            <a-radio-button value="dual"> 双LAN口 </a-radio-button>
        </a-radio-group>

        <a-tabs default-active-key="wan" style="margin-top: 16px;">
            <a-tab-pane key="wan" tab="WAN配置">
                <wan-config ref="wanConfig" :disabled="lanMode === 'dual'" />
            </a-tab-pane>
            <a-tab-pane key="lan" tab="LAN网络">
                <lan-network ref="lanNetwork" />
            </a-tab-pane>
            <a-tab-pane key="4g" tab="4G网络">
                <four-g-network ref="fourGNetwork" />
            </a-tab-pane>
            <a-tab-pane key="wifi" tab="WIFI网络">
                <wifi-network ref="wifiNetwork" />
            </a-tab-pane>
        </a-tabs>

        <div style="text-align: center; margin-top: 24px;">
            <a-button type="primary" style="margin-right: 8px;" @click="handleSave">
                保存
            </a-button>
        </div>
    </div>
</template>

<script>
import { Radio, Tabs, Button, message } from 'ant-design-vue'
import WanConfig from './components/WanConfig.vue'
import LanNetwork from './components/LanNetwork.vue'
import FourGNetwork from './components/FourGNetwork.vue'
import WifiNetwork from './components/WifiNetwork.vue'
import { SettingsTabManager } from '@/api/TabManager'

export default {
    name: 'LocalNetworkSettings',
    components: {
        'a-radio-group': Radio.Group,
        'a-radio-button': Radio.Button,
        'a-tabs': Tabs,
        'a-tab-pane': Tabs.TabPane,
        'a-button': Button,
        WanConfig,
        LanNetwork,
        FourGNetwork,
        WifiNetwork
    },
    data() {
        return {
            lanMode: 'dual',
            settingsTabManager: new SettingsTabManager(),
            dataLoaded: false,
            timestamp: null // 用于跟踪数据更新时间戳
        }
    },
    mounted() {
        console.log('🚀 [LocalNetworkSettings] 组件 mounted')
    },
    methods: {
        async handleSave() {
            try {
                // 收集所有子组件的配置数据
                const configData = {
                    lanMode: this.lanMode,
                    wanConfig: this.$refs.wanConfig
                        ? this.$refs.wanConfig.getConfig()
                        : null,
                    lanNetwork: this.$refs.lanNetwork
                        ? this.$refs.lanNetwork.getConfig()
                        : null,
                    fourGNetwork: this.$refs.fourGNetwork
                        ? this.$refs.fourGNetwork.getConfig()
                        : null,
                    wifiNetwork: this.$refs.wifiNetwork
                        ? this.$refs.wifiNetwork.getConfig()
                        : null
                }

                console.log('保存本地网络配置:', configData)

                // 调用API保存配置
                const res = await this.settingsTabManager.saveLocalNetworkSettings(
                    JSON.stringify(configData)
                )

                if (res && res.code !== 0) {
                    throw new Error(res.msg)
                }
                message.success('本地网络设置保存成功')

                // 发送更新事件给父组件
                const updateTimestamp = new Date().getTime()
                this.$emit('settings-updated', {
                    localNetworkSettings: {
                        data: JSON.stringify(configData),
                        timestamp: updateTimestamp
                    }
                })

                // 更新本地时间戳
                this.timestamp = updateTimestamp
            } catch (error) {
                console.error('保存本地网络设置失败:', error)
                message.error('保存失败: ' + (error.message || '未知错误'))
            }
        },

        // 更新数据的方法，供父组件调用
        updateData(settingsData) {
            console.log('🔄 [LocalNetworkSettings] 更新数据:', settingsData)

            // 如果传入null，执行强制重置操作
            if (settingsData === null) {
                console.log('🔄 [LocalNetworkSettings] 执行强制重置操作')
                // 重置为默认状态
                this.lanMode = 'lan'
                this.dataLoaded = false
                this.timestamp = null
                // 重置子组件状态
                this.$nextTick(() => {
                    if (this.$refs.wanConfig && this.$refs.wanConfig.resetConfig) {
                        this.$refs.wanConfig.resetConfig()
                    }
                    if (this.$refs.lanNetwork && this.$refs.lanNetwork.resetConfig) {
                        this.$refs.lanNetwork.resetConfig()
                    }
                    if (this.$refs.fourGNetwork && this.$refs.fourGNetwork.resetConfig) {
                        this.$refs.fourGNetwork.resetConfig()
                    }
                })
                console.log('✅ [LocalNetworkSettings] 强制重置完成')
                return
            }

            if (!settingsData) {
                console.log('⚠️ [LocalNetworkSettings] 没有数据，跳过更新')
                return
            }

            // 检查时间戳，避免重复更新
            if (settingsData.timestamp && this.timestamp === settingsData.timestamp) {
                console.log('⚠️ [LocalNetworkSettings] 时间戳相同，跳过重复更新:', settingsData.timestamp)
                return
            }

            try {
                settingsData = JSON.parse(settingsData.data)
                console.log('🔍 [LocalNetworkSettings] 更新数据:', settingsData)
                // 更新LAN模式
                if (settingsData.lanMode !== undefined) {
                    this.lanMode = settingsData.lanMode
                }

                // 更新子组件数据
                this.$nextTick(() => {
                    // 更新WAN配置
                    if (
                        settingsData.wanConfig &&
                        this.$refs.wanConfig &&
                        this.$refs.wanConfig.setConfig
                    ) {
                        this.$refs.wanConfig.setConfig(settingsData.wanConfig)
                    }

                    // 更新LAN网络配置
                    if (
                        settingsData.lanNetwork &&
                        this.$refs.lanNetwork &&
                        this.$refs.lanNetwork.setConfig
                    ) {
                        this.$refs.lanNetwork.setConfig(settingsData.lanNetwork)
                    }

                    // 更新4G网络配置
                    if (
                        settingsData.fourGNetwork &&
                        this.$refs.fourGNetwork &&
                        this.$refs.fourGNetwork.setConfig
                    ) {
                        this.$refs.fourGNetwork.setConfig(settingsData.fourGNetwork)
                    }

                    // 更新WiFi网络配置
                    if (
                        settingsData.wifiNetwork &&
                        this.$refs.wifiNetwork &&
                        this.$refs.wifiNetwork.setConfig
                    ) {
                        this.$refs.wifiNetwork.setConfig(settingsData.wifiNetwork)
                    }
                })

                // 更新时间戳
                this.timestamp = settingsData.timestamp
                this.dataLoaded = true
                console.log('✅ [LocalNetworkSettings] 数据更新成功，时间戳:', this.timestamp)
            } catch (error) {
                console.error('❌ [LocalNetworkSettings] 数据更新失败:', error)
            }
        },

        // 获取当前配置数据
        getCurrentConfig() {
            return {
                lanMode: this.lanMode,
                wanConfig: this.$refs.wanConfig
                    ? this.$refs.wanConfig.getConfig()
                    : null,
                lanNetwork: this.$refs.lanNetwork
                    ? this.$refs.lanNetwork.getConfig()
                    : null,
                fourGNetwork: this.$refs.fourGNetwork
                    ? this.$refs.fourGNetwork.getConfig()
                    : null,
                wifiNetwork: this.$refs.wifiNetwork
                    ? this.$refs.wifiNetwork.getConfig()
                    : null
            }
        }
    }
}
</script> 

<style scoped>
.ant-form-item {
    margin-bottom: 0;
}
</style> 